<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swiper Test</title>
</head>
<body>
    <div class="content">
        <ul class="wrapper">
            <li><img src="./1.jfif" ></li>
            <li><img src="./2.jfif" ></li>
            <li><img src="./3.jfif" ></li>
            <li><img src="./1.jfif" ></li>
        </ul>
        <ul class="radius">
        </ul>
        <div class="prev">
            <span><</span>
        </div>
        <div class="next">
            <span>></span>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onload= function() {
        var content = document.getElementsByClassName('content')[0] //整个容器
        var wrapper = document.getElementsByClassName('wrapper')[0] //轮播图容器
        var radius = document.getElementsByClassName('radius')[0] //小圆点容器
        var prev = document.getElementsByClassName('prev')[0] //左控制器
        var next = document.getElementsByClassName('next')[0] //右控制器
        var imgWidth = wrapper.children[0].offsetWidth //一个轮播li的宽度
        var wrapIndex = 0  //用来判断位置的标识

        //悬停显隐
        content.onmouseover = function() {
            clearInterval(timer)
            next.style.opacity = "0.6";
            prev.style.opacity = "0.6";
        }
        content.onmouseout = function() {
            timer = setInterval(function(){
                next.onclick()
            },3500)
            next.style.opacity = "0";
            prev.style.opacity = "0";
        }

        //动态创建圆点指示器
        function createLi() {
            for(let i=0; i<wrapper.children.length-1; i++) {  //轮播图x张，实际只是轮播x-1张，小圆点也是x-1个
                let li = document.createElement("li") //创建li标签
                    radius.appendChild(li) //添加进radius
            }
            radius.children[0].className='radius-active' //初始化，为第一个小圆点添加active
        }
        createLi()
        
    

        //指示器响应
        //清除所有active，跟随当前标识响应相应的小圆点添加active。
        function cirAction(wrapIndex) {
            for(let i=0; i<radius.children.length; i++) {
                radius.children[i].classList.remove("radius-active")
            }
            if(wrapIndex === wrapper.children.length-1) {
                radius.children[0].className='radius-active'
            }
            else {
                radius.children[wrapIndex].className='radius-active'
            }
        }

        //指示器控制
        function cirMouse() {
            for(let i=0; i<radius.children.length; i++) {
                radius.children[i].onmouseover = function() {
                    clearInterval(timer);
                    animate(wrapper, -i*imgWidth);
                    wrapIndex = i;
                    cirAction(wrapIndex)
                }
            }
        }
        cirMouse()

        //滑动动画
        function animate(el, target) {
            clearInterval(el.timer)  //停止上一个功能的el.timer
            el.timer = setInterval(function(){  //16毫秒地循环执行
                let move = 8;
                let present = wrapper.offsetLeft; //当前位置left值
                move = present > target ? -move : move;
                present += move;  //改变当前位置left值
                if(Math.abs(present-target) > Math.abs(move)) {
                    wrapper.style.left = present + 'px'  //如果位置差大于move，则保留位置继续循环移动
                }
                else {  //如果小于，则让当前位置等于目标位置，退出计时器循环
                    clearInterval(el.timer);
                    wrapper.style.left = target + 'px'
                }
            },16)  
        }
        

        //next控制
        //next元素的单击控制是轮播图核心，提前封装好了可在其他功能上直接调用，减少代码量。
        //注意当轮播到最后一张图时，要让位置标识变为"0"，
        //其实也就是闪现到第一张图(第一张和最后一张相同，不漏痕迹)，这就是前面为什么要在最后加一张首图的原因。
        next.onclick = function() {
            if(wrapIndex === wrapper.children.length-1){ //如果到了最后一张
                wrapIndex = 0;  //调整标识
                wrapper.style.left = 0 + 'px'; //闪现回第一张
            }
            wrapIndex++;
            animate(wrapper,-wrapIndex*imgWidth); //滑动动画
            cirAction(wrapIndex);  //小圆点跟随响应
        }
        
        //prev控制
        prev.onclick = function() {
            if(wrapIndex === 0){
                wrapIndex = wrapper.children.length-1;
                wrapper.style.left = -wrapIndex*imgWidth + 'px';
            }
            wrapIndex--;
            animate(wrapper,-wrapIndex*imgWidth);
            cirAction(wrapIndex)
        }

        //自动滑动
        var timer = setInterval(function(){
            next.onclick()
        },3500)
    }


</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .content {
        width: 300px;
        height: 300px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
    }
    .wrapper {
        width: 400%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        transition: none;
    }
    .wrapper li {
        flex: 1;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .wrapper li img {
        width: 100%;
        height: 100%;
    }
    .radius {
        height: 12px;
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: 10px;
        left: 10px;
        display: flex;
        align-items: center;
    }
    .radius li {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
        opacity: 0.6;
        margin: 0 3px;
        padding: 0;
        list-style: none;
    }
    .radius-active {
        opacity: 1 !important;
        border: 2px solid rgb(255, 255, 255, 0.5);
        background-clip: padding-box;
    }
    .prev {
        width: 23px;
        line-height: 34px;
        text-align: center;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -17px;
        background-color: darkgray;
        opacity: 0;
    }
    .next {
        width: 23px;
        line-height: 34px;
        text-align: center;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -17px;
        background-color: darkgray;
        opacity: 0;
    }
    .prev span, .next span {
        font-weight: bold;
        color: white;
        font-size: 18px;
    }
</style>
</html>
